import { Form, Input, Button, Table, Pagination, Popconfirm, Space, Select, message, Modal } from 'antd'
import './tem.scss'
import { useEffect, useState } from 'react';
import http from '../../utils/http'
import store from '../../store/index'
const { Option } = Select;
// import '../Role_management/role_management.scss'
const TenTable = ({ setState }) => {
    //页面加载获取数据
    const [data, setData] = useState([])
    const [myid, setMyid] = useState()
    const [delkey, setDelkey] = useState([])
    var provide = { size: 10, current: 1 }
    const [total, setTotal] = useState(1)
    const [selectedRowKeys, setSelectedRowKeys] = useState([])
    const [current, setCurrent] = useState(1)
    useEffect(() => {
        getdata('')
    }, [])
    const getdata = (v) => {
        http({
            url: '/Peree_Person/findPeree_Person',
            params: { per_Name: v },
        }).then((res) => {
            console.log(res)
            // // data = res.data
            // // setData(res.data)
            // console.log(data)
            if (res.code == 200) {
                //对数据进行处理
                let arr = res.data.listCustomer.map((v, i) => {
                    return {
                        key: v.person_id,
                        person_name: v.person_name,
                        person_phone: v.person_phone,
                        per_Name: v.per_Name,
                        ten_Serialint: v.ten_Serialint,
                        room_no: v.room_no,
                        person_creatime: getLocalTime(v.person_creatime),
                        person_type: v.person_type == 1 ? '普通管理员' : '超级管理员'
                    }
                })
                setData(arr);
                setTotal(res.data.countRows)
                sessionStorage.setItem('table', JSON.stringify(arr));
            }
        })
    }
    const layout = {
        labelCol: {
            span: 10,
        },
        wrapperCol: {
            span: 16,
        },
    };
    // 时间戳转换函数
    function getLocalTime(nS) {
        let date = new Date(nS);
        //时间戳为10位需*1000，时间戳为13位的话不需乘1000
        let y = date.getFullYear();
        let MM = date.getMonth() + 1;
        MM = MM < 10 ? "0" + MM : MM; //月补0
        let d = date.getDate();
        d = d < 10 ? "0" + d : d; //天补0
        // let h = date.getHours();
        // h = h < 10 ? "0" + h : h; //小时补0
        // let m = date.getMinutes();
        // m = m < 10 ? "0" + m : m; //分钟补0
        // let s = date.getSeconds();
        // s = s < 10 ? "0" + s : s; //秒补0
        // return y + "-" + MM + "-" + d + " " + h + ":" + m + ":" + s;
        return y + "-" + MM + "-" + d;
    }
    const CdDetail = (a, b) => {
        store.zengjiayu.setTendetailid(b.key)
        console.log(b.key)
        setState(3)
    }
    const fenyeqi = (a, b) => {
        setCurrent(a)
        provide = { size: 10, current: a }
        getdata()
    }
    //修改Form的样式
    const editlayout = {
        labelCol: {
            span: 6,
        },
        wrapperCol: {
            span: 16,
        },
    };
    const tailLayout = {
        wrapperCol: {
            offset: 8,
            span: 16,
        },
    };
    const [form] = Form.useForm();
    const xinzeng = () => {
        setState(2)
    }
    //查询
    const search = () => {
        console.log(form.getFieldsValue(true))
        provide = form.getFieldsValue(true).per_Name
        console.log(provide);
        getdata(provide)
    }
    //重置
    const resize = () => {
        console.log(selectedRowKeys, 'czl');
        setSelectedRowKeys([])
        provide = { size: 10, current: 1 }
        form.setFieldsValue({
            per_Name: "",
            person_id: '',
            person_name: "",
            person_type: '',
            room_no: '',
            ten_Serialint: "",
        })
        getdata()

    }
    //修改  确定按钮
    const onFinish = (values) => {
        console.log(values);
        form.resetFields();
        seteditModel(false)
    };
    //取消 修改
    const quxiao = () => {
        seteditModel(false)
    }
    //设置修改Modal的显示与隐藏
    const [editModel, seteditModel] = useState(false)
    const openEditBox = (a, b) => {
        console.log(a, b)
        seteditModel(true)
    }
    const edithideModal = () => {
        seteditModel(false)
    }
    function cancel(e) {
    }

    function confirm(a, b) {
        var id = []
        if (b) {
            id.push(b.key)
        } else {
            id = selectedRowKeys
            setSelectedRowKeys([])
        }
        console.log(id);
        console.log(current)
        http({
            url: '/Peree_Person/DeletePersonInfo',
            data: id,
            method: 'post',
        }).then((res) => {
            console.log(res)
            if (res.code == 200) {
                provide = { size: 10, current: current }
                getdata('')
                message.success('删除成功！');
            }
            else {
                message.error('删除失败！')
            }
        })
    }
    const columns = [
        {
            title: '人员姓名',
            dataIndex: 'person_name',
            render: (text) => <a>{text}</a>,
        },
        {
            title: '联系方式',
            dataIndex: 'person_phone',
        },
        {
            title: '人员类型',
            dataIndex: 'person_type',
        },
        {
            title: '租户名称',
            dataIndex: 'per_Name',
        },
        {
            title: '所属楼宇',
            dataIndex: 'ten_Serialint',
        },
        {
            title: '房间名称',
            dataIndex: 'room_no',
        },
        {
            title: '注册时间',
            dataIndex: 'person_creatime',
        },
        {
            title: '操作',
            dataIndex: 'operation',
            render: (text, record) => (
                <Space size="middle">
                    {/* () => { openEditBox(text, record) } */}
                    <a onClick={() => { CdDetail(text, record) }}>详情</a>
                    <Popconfirm
                        title="确定要删除吗?"
                        onConfirm={() => { confirm(text, record) }}
                        onCancel={cancel}
                        okText="Yes"
                        cancelText="No"
                    >
                        <a href="#">删除</a>
                    </Popconfirm>
                </Space>
            ),
        },
    ];
    //  const data = []; // rowSelection object indicates the need for row selection
    let newSelectData = []
    const rowSelection = {
        selectedRowKeys,
        onChange: (selectedRowKeys, selectedRows) => {
            setSelectedRowKeys(selectedRowKeys)
            console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
            newSelectData = [...selectedRows]
        },
        getCheckboxProps: (record) => ({
            // disabled: record.name === 'Disabled User',
            // Column configuration not to be checked
            name: record.name,
        }),
    };

    return <div className='roleContent tenTable'>
        <Form form={form} name="horizontal_login" layout="inline" className='title'>
            <Form.Item
                name="username">
                <div className='kuai'>
                    <span></span>
                    <span>租户人员管理</span>
                </div>
            </Form.Item>
            <Form.Item className='btn'>
                <div>
                    <Button className='cha'
                        type="primary"
                        onClick={xinzeng}>新增</Button>
                    <Popconfirm title="确定要将他们全部删除吗？"
                        onConfirm={() => { confirm() }}
                        onCancel={cancel} okText="Yes" cancelText="No">
                        <a href="#"><Button className='resize' type="primary">批量删除</Button></a>
                    </Popconfirm>
                </div>

            </Form.Item>
        </Form>
        <div className='biao'>
            <Form form={form} name="horizontal_login" layout="inline" className='Role tim'>
                <div>
                    <Form.Item
                        name="per_Name"
                        label='租户名称'
                    ><Input placeholder='请输入租户名称' />
                    </Form.Item>
                    <Form.Item
                        name="ten_Serialint"
                        label="所属楼宇"
                    >
                        <Select>
                            <Select.Option value="A1">
                                A1
                            </Select.Option>
                            <Select.Option value="B2">
                                B2
                            </Select.Option>
                            <Select.Option value="C3">
                                C3
                            </Select.Option>
                        </Select>
                    </Form.Item>
                    <Form.Item
                        name="room_no"
                        label='房间名称'
                    ><Input placeholder='请输入房间名称' />
                    </Form.Item>

                    <Form.Item className='btn'>
                        <div>
                            <Button className='cha'
                                type="primary"
                                onClick={search}>查询</Button>
                            <Button className='resize' onClick={resize} type="primary">重置</Button>
                        </div>

                    </Form.Item>
                </div>
                <div>
                    <Form.Item
                        name="person_name"
                        label='人员名称'
                    ><Input placeholder='请输入人员名称' />
                    </Form.Item>
                    <Form.Item
                        name="person_phone"
                        label='联系方式'
                    ><Input placeholder='请输入联系方式' />
                    </Form.Item>
                    <Form.Item
                        name="person_type"
                        label="人员类型"
                    >
                        <Select>
                            <Select.Option value="0">
                                负责人
                            </Select.Option>
                            <Select.Option value="1">
                                普通员工
                            </Select.Option>
                        </Select>
                    </Form.Item>
                    <div></div>
                </div>
            </Form>
            {/* <Form {...layout} form={form} name="horizontal_login" layout="inline" className='Role' style={{ alignItems: 'center' }}>
                <div id='sousuo' style={{ flex: 6 }}>
                    <div style={{ display: 'flex', flexWrap: 'wrap' }}>
                        <div style={{ marginBottom: '10px' }}>
                            <Form.Item
                                name="tenantname"
                                label='租户名称'
                            ><Input placeholder='请输入租户名称' />
                            </Form.Item>
                        </div>
                        <div>
                            <Form.Item
                                name="roomname"
                                label='房间名称'
                            ><Input placeholder='请输入房间名称' />
                            </Form.Item>
                        </div>
                        <div>
                            <Form.Item
                                name="belong"
                                label='所属楼宇'
                            > <Select
                                placeholder="请选择"
                                allowClear
                                // className='xuanze'
                                style={{ width: '100px' }}
                            >
                                    <Option value="A1幢">A1幢</Option>
                                    <Option value="B2幢">B2幢</Option>
                                    <Option value="C3幢">C3幢</Option>
                                </Select>
                            </Form.Item>
                        </div>
                        <div>
                            <Form.Item
                                name="username"
                                label='人员名称'
                            ><Input placeholder='请输入人员名称' />
                            </Form.Item>
                        </div>
                        <div>
                            <Form.Item
                                name="tel"
                                label='联系方式'
                            ><Input placeholder='请输入联系方式' />
                            </Form.Item>
                        </div>
                        <div>
                            <Form.Item
                                name="usertype"
                                label='人员类型'
                            ><Select
                                placeholder="请选择"
                                allowClear
                                style={{ width: '100px' }}
                            >
                                    <Option value="负责人">负责人</Option>
                                    <Option value="普通员工">普通员工</Option>
                                    <Option value="临时人员">临时人员</Option>
                                </Select>
                            </Form.Item>
                        </div>
                    </div>
                </div>
                <Form.Item className='btn' style={{ flex: 1 }}>
                    <div>
                        <Button className='cha'
                            type="primary"
                            onClick={search}>查询</Button>
                        <Button className='resize' onClick={resize} type="primary">重置</Button>
                    </div>

                </Form.Item>
            </Form> */}
            <Table className='table1'
                rowSelection={{
                    ...rowSelection,
                }}
                columns={columns}
                dataSource={data}
                pagination={false}
            />
            <Pagination className='fenyeqi' onChange={fenyeqi} total={total} />
        </div>
        <Modal
            title="修改"
            visible={editModel}
            onOk={edithideModal}
            onCancel={edithideModal}
            okText="确认"
            cancelText="取消"
            footer={null}
        >
            <Form {...editlayout} form={form} name="control-hooks" onFinish={onFinish}>
                <Form.Item
                    name="person_name"
                    label="人员姓名"
                    rules={[
                        {
                            required: true,
                        },
                    ]}
                >
                    <Input />
                </Form.Item>
                <Form.Item
                    name="person_phone"
                    label="联系方式"
                    rules={[
                        {
                            required: true,
                        },
                    ]}
                >
                    <Input ></Input>
                </Form.Item>
                <Form.Item
                    name="person_type"
                    label="人员类型"
                    rules={[
                        {
                            required: true,
                        },
                    ]}
                >
                    <Select
                        // placeholder="请选择状态"
                        allowClear
                    >
                        <Option value="启用">启用</Option>
                        <Option value="禁用">禁用</Option>
                    </Select>
                </Form.Item>
                <Form.Item
                    name="per_Name"
                    label="租户名称"
                    rules={[
                        {
                            required: true,
                        },
                    ]}
                >
                    <Input />
                </Form.Item>
                <Form.Item
                    name="ten_Serialint"
                    label="所属楼宇"
                    rules={[
                        {
                            required: true,
                        },
                    ]}
                >
                    <Select
                        // placeholder="请选择状态"
                        allowClear
                    >
                        <Option value="启用">启用</Option>
                        <Option value="禁用">禁用</Option>
                    </Select>
                </Form.Item>
                <Form.Item
                    name="room_no"
                    label="房间名称"
                    rules={[
                        {
                            required: true,
                        },
                    ]}
                >
                    <Input />
                </Form.Item>
                <Form.Item
                    name="person_creatime"
                    label="注册时间"
                    rules={[
                        {
                            required: true,
                        },
                    ]}
                >
                    <Input />
                </Form.Item>
                <Form.Item {...tailLayout}>
                    <Button type="primary" htmlType="submit">
                        提交
                    </Button>
                    <Button htmlType="button" onClick={quxiao} style={{ marginLeft: '20px' }}>
                        取消
                    </Button>
                </Form.Item>
            </Form>
        </Modal>
    </div>
};
export default TenTable